<template>
  <div class="userPage">
    <div class="slide">
      <div class="img" >
        <img :src="userMsg.avatar_url" alt="">
        <!--取消自动上传，使用axios上传-->
        <!-- <input type="text" name="gname" v-model="gname" /> -->
        <!-- <el-upload
          class="avatar-uploader"
          action="/api/users/add"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          name="picurl"
          :data="gname"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <!-- <input type="file" value="选中" /> -->
          <!-- <el-button style="margin-left: 10px" size="small" type="success"
        >点击上传单个文件</el-button
      > -->
      </div>
      <!-- 右侧信息 -->
      <div class="right">
        <div>
          <h2>{{ userMsg.user_name }}</h2>
          <!-- 用户头像 -->
          <div class="use">
            <p>邓紫棋（Gloria Tang Tsz-Kei），又名G.E.M.，中国香港创作型女歌手、词曲创作人。 2008年7月10日以16岁之龄出道。同年10月16日发行首张EP《G.E.M.》，取得香港各大乐坛颁奖礼新人金奖。</p>
            <p>粉丝：1 关注：45</p>
          </div>
        </div>
        <!-- 右侧信息下方 -->
        <div>
          <!-- <el-button type="primary but" round>
√
            已关注
          </el-button> -->
        </div>
      </div>
    </div>

    <userOp></userOp>
  </div>
</template>

<script>
import userOp from "./child/userOp.vue";
import { mapState } from "vuex";
export default {
  components: {
    userOp,
  },
  data: () => {
    return {
      src: require("../../../public/image/凌晨起床.jpg"),
      imageUrl: "",
    };
  },
    computed:{
        ...mapState({
            userMsg: state => state.userMsg,
    })
    },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(URL.createObjectURL(file.raw));
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    uploadFile(file) {
      const formData = new FormData();
      formData.append("picurl", file.file);
      // formData.append("gname", this.gname);
      this.axios
        .post("/api/users/add", formData)
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/common.scss";

.userPage {
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  img {
    width: 18.85rem;
    height: 18.85rem;
    border-radius: 50%;
    margin-right: 2rem;
  }

  .slide {
    display: flex;
    justify-content: flex-start;
    div {
      .use {
        width: 100%;
      }
      .head {
        margin: 0.5rem 0;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
      }
    }
    .but {
      .icon {
        font-size: 2rem;
        margin-bottom: -0.2rem;
      }
      background-color: $undercolor;
    }
  }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 18.85rem;
    height: 18.85rem;
    line-height: 18.85rem;
    text-align: center;
  }
  .avatar {
    
    width: 18.85rem;
    height: 18.85rem
    // display: block;
  }
</style>